<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>编辑简历</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/bootstrap-icons/1.8.0/font/bootstrap-icons.min.css">
    <style>
        :root {
            --primary-color: #3370ff;
            --background-color: #f5f7fa;
            --card-bg-color: #ffffff;
            --border-color: #e0e0e0;
            --text-primary: #303133;
            --text-secondary: #606266;
            --text-light: #909399;
            --success-color: #67c23a;
            --warning-color: #ff9900;
            --border-radius: 8px;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", STHeiti, "Microsoft Yahei", Tahoma, Simsun, sans-serif;
            background-color: var(--background-color);
            color: var(--text-primary);
            line-height: 1.5;
            font-size: 14px;
            max-width: 375px;
            margin: 0 auto;
            min-height: 100vh;
            height: 100%;
            position: relative;
        }

        .app-container {
            display: flex;
            flex-direction: column;
            min-height: 100vh;
            background-color: var(--background-color);
            padding-bottom: 60px;
        }

        /* Header */
        .page-header {
            height: 44px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: var(--card-bg-color);
            position: relative;
            box-shadow: 0 1px 2px rgba(0,0,0,0.05);
            z-index: 10;
        }

        .page-title {
            font-size: 17px;
            font-weight: 600;
            color: var(--text-primary);
        }

        .back-button {
            position: absolute;
            left: 15px;
            font-size: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: none;
            border: none;
            color: var(--text-primary);
            cursor: pointer;
        }

        /* Form Styles */
        .edit-content {
            padding: 16px;
        }

        .edit-section {
            background-color: var(--card-bg-color);
            border-radius: var(--border-radius);
            padding: 16px;
            margin-bottom: 16px;
        }

        .section-title {
            font-size: 16px;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 16px;
            display: flex;
            align-items: center;
        }

        .section-title i {
            margin-right: 8px;
            color: var(--primary-color);
        }

        .form-group {
            margin-bottom: 16px;
        }

        .form-group:last-child {
            margin-bottom: 0;
        }

        .form-label {
            display: block;
            font-size: 14px;
            color: var(--text-secondary);
            margin-bottom: 8px;
        }

        .form-input {
            width: 100%;
            height: 40px;
            border-radius: var(--border-radius);
            border: 1px solid var(--border-color);
            padding: 0 12px;
            font-size: 14px;
            color: var(--text-primary);
            background-color: var(--card-bg-color);
            outline: none;
            transition: border-color 0.3s;
        }

        .form-input:focus {
            border-color: var(--primary-color);
        }

        .form-textarea {
            width: 100%;
            border-radius: var(--border-radius);
            border: 1px solid var(--border-color);
            padding: 10px 12px;
            font-size: 14px;
            color: var(--text-primary);
            background-color: var(--card-bg-color);
            min-height: 100px;
            resize: vertical;
            outline: none;
            transition: border-color 0.3s;
        }

        .form-textarea:focus {
            border-color: var(--primary-color);
        }

        /* Date Range Inputs */
        .date-range {
            display: flex;
            align-items: center;
        }

        .date-range .form-input {
            flex: 1;
        }

        .date-separator {
            margin: 0 10px;
            color: var(--text-secondary);
        }

        /* Bottom Actions */
        .bottom-actions {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: var(--card-bg-color);
            padding: 12px 16px;
            display: flex;
            gap: 12px;
            box-shadow: 0 -1px 2px rgba(0,0,0,0.05);
            max-width: 375px;
            margin: 0 auto;
        }

        .action-btn {
            flex: 1;
            padding: 10px;
            border-radius: var(--border-radius);
            font-size: 14px;
            font-weight: 500;
            text-align: center;
            cursor: pointer;
            border: none;
        }

        .primary-btn {
            background-color: var(--primary-color);
            color: white;
        }

        .secondary-btn {
            background-color: #f0f0f0;
            color: var(--text-primary);
        }

        .action-btn:active {
            opacity: 0.9;
            transform: scale(0.98);
        }

        /* Avatar Upload */
        .avatar-upload {
            display: flex;
            align-items: center;
            margin-bottom: 16px;
        }

        .avatar-preview {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background-color: var(--border-color);
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            margin-right: 16px;
        }

        .avatar-preview img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .upload-btn {
            height: 36px;
            padding: 0 12px;
            background-color: var(--background-color);
            border: 1px solid var(--border-color);
            border-radius: var(--border-radius);
            color: var(--text-secondary);
            font-size: 14px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .upload-btn i {
            margin-right: 6px;
        }

        /* Add Item Button */
        .add-item-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 40px;
            border: 1px dashed var(--border-color);
            border-radius: var(--border-radius);
            background-color: transparent;
            color: var(--text-secondary);
            font-size: 14px;
            cursor: pointer;
            margin-top: 8px;
        }

        .add-item-btn i {
            margin-right: 6px;
        }

        /* Entry Group */
        .entry-group {
            position: relative;
            margin-bottom: 24px;
            padding: 16px;
            border: 1px solid var(--border-color);
            border-radius: var(--border-radius);
        }

        .entry-group:last-child {
            margin-bottom: 8px;
        }

        .delete-entry {
            position: absolute;
            top: 12px;
            right: 12px;
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #f0f0f0;
            border: none;
            border-radius: 50%;
            color: var(--text-secondary);
            font-size: 14px;
            cursor: pointer;
        }

        /* Skill Tags */
        .skill-tag-input {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 8px;
        }

        .skill-tag {
            display: flex;
            align-items: center;
            background-color: #f0f0f0;
            padding: 4px 8px 4px 12px;
            border-radius: 16px;
            font-size: 13px;
        }

        .remove-tag {
            background: none;
            border: none;
            color: var(--text-secondary);
            font-size: 16px;
            margin-left: 4px;
            cursor: pointer;
            display: flex;
            align-items: center;
        }

        .skill-input-wrapper {
            display: flex;
            align-items: center;
        }

        .skill-input {
            flex: 1;
        }

        .add-skill-btn {
            margin-left: 8px;
            height: 40px;
            width: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: var(--primary-color);
            color: white;
            border: none;
            border-radius: var(--border-radius);
            font-size: 18px;
            cursor: pointer;
        }

        /* Tab Navigation */
        .tab-nav {
            display: flex;
            background-color: var(--card-bg-color);
            border-radius: var(--border-radius);
            padding: 4px;
            margin-bottom: 16px;
        }

        .tab-item {
            flex: 1;
            padding: 10px;
            text-align: center;
            font-size: 14px;
            color: var(--text-secondary);
            cursor: pointer;
            border-radius: calc(var(--border-radius) - 4px);
            transition: all 0.3s;
        }

        .tab-item.active {
            background-color: var(--primary-color);
            color: white;
            font-weight: 500;
        }

        /* For the hide/show sections */
        .edit-tab-content {
            display: none;
        }

        .edit-tab-content.active {
            display: block;
        }
    </style>
</head>
<body>
    <div class="app-container">
        <header class="page-header">
            <button class="back-button" onclick="history.back()">
                <i class="bi bi-chevron-left"></i>
            </button>
            <h1 class="page-title">编辑简历</h1>
        </header>

        <div class="edit-content">
            <!-- 选项卡导航 -->
            <div class="tab-nav">
                <div class="tab-item active" data-tab="basic-info">基本信息</div>
                <div class="tab-item" data-tab="education">教育经历</div>
                <div class="tab-item" data-tab="experience">实习经历</div>
                <div class="tab-item" data-tab="projects-skills">项目与技能</div>
            </div>

            <!-- 基本信息 -->
            <div id="basic-info-tab" class="edit-tab-content active">
                <section class="edit-section">
                    <h2 class="section-title">
                        <i class="bi bi-person"></i>
                        基本信息
                    </h2>
                    <div class="avatar-upload">
                        <div class="avatar-preview">
                            <img src="../img/user-avatar.jpg" alt="头像" id="avatar-preview-img">
                        </div>
                        <button class="upload-btn">
                            <i class="bi bi-camera"></i>
                            更换头像
                        </button>
                        <input type="file" id="avatar-upload" style="display: none;" accept="image/*">
                    </div>
                    <div class="form-group">
                        <label for="name" class="form-label">姓名</label>
                        <input type="text" id="name" class="form-input" placeholder="请输入姓名" value="张同学">
                    </div>
                    <div class="form-group">
                        <label for="school" class="form-label">学校</label>
                        <input type="text" id="school" class="form-input" placeholder="请输入学校名称" value="北京大学">
                    </div>
                    <div class="form-group">
                        <label for="major" class="form-label">专业</label>
                        <input type="text" id="major" class="form-input" placeholder="请输入专业名称" value="计算机科学与技术">
                    </div>
                    <div class="form-group">
                        <label for="email" class="form-label">邮箱</label>
                        <input type="email" id="email" class="form-input" placeholder="请输入邮箱地址" value="example@email.com">
                    </div>
                    <div class="form-group">
                        <label for="phone" class="form-label">手机号码</label>
                        <input type="tel" id="phone" class="form-input" placeholder="请输入手机号码" value="13888888888">
                    </div>
                </section>
            </div>

            <!-- 教育经历 -->
            <div id="education-tab" class="edit-tab-content">
                <section class="edit-section">
                    <h2 class="section-title">
                        <i class="bi bi-mortarboard"></i>
                        教育经历
                    </h2>
                    
                    <div class="entry-group">
                        <button class="delete-entry">
                            <i class="bi bi-x"></i>
                        </button>
                        <div class="form-group">
                            <label for="edu-school" class="form-label">学校名称</label>
                            <input type="text" id="edu-school" class="form-input" placeholder="请输入学校名称" value="北京大学">
                        </div>
                        <div class="form-group">
                            <label for="edu-date" class="form-label">就读时间</label>
                            <div class="date-range">
                                <input type="text" class="form-input" placeholder="开始时间" value="2020.09">
                                <span class="date-separator">-</span>
                                <input type="text" class="form-input" placeholder="结束时间" value="2024.06">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="edu-degree" class="form-label">学历层次</label>
                            <input type="text" id="edu-degree" class="form-input" placeholder="请输入学历" value="本科">
                        </div>
                        <div class="form-group">
                            <label for="edu-major" class="form-label">专业名称</label>
                            <input type="text" id="edu-major" class="form-input" placeholder="请输入专业名称" value="计算机科学与技术">
                        </div>
                        <div class="form-group">
                            <label for="edu-courses" class="form-label">主修课程</label>
                            <textarea id="edu-courses" class="form-textarea" placeholder="请输入主修课程">数据结构、算法分析、操作系统、计算机网络、数据库系统等</textarea>
                        </div>
                    </div>
                    
                    <button class="add-item-btn">
                        <i class="bi bi-plus"></i>
                        添加教育经历
                    </button>
                </section>
            </div>

            <!-- 实习经历 -->
            <div id="experience-tab" class="edit-tab-content">
                <section class="edit-section">
                    <h2 class="section-title">
                        <i class="bi bi-briefcase"></i>
                        实习经历
                    </h2>
                    
                    <div class="entry-group">
                        <button class="delete-entry">
                            <i class="bi bi-x"></i>
                        </button>
                        <div class="form-group">
                            <label for="exp-company" class="form-label">公司名称</label>
                            <input type="text" id="exp-company" class="form-input" placeholder="请输入公司名称" value="腾讯科技">
                        </div>
                        <div class="form-group">
                            <label for="exp-date" class="form-label">实习时间</label>
                            <div class="date-range">
                                <input type="text" class="form-input" placeholder="开始时间" value="2023.06">
                                <span class="date-separator">-</span>
                                <input type="text" class="form-input" placeholder="结束时间" value="2023.09">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="exp-position" class="form-label">职位名称</label>
                            <input type="text" id="exp-position" class="form-input" placeholder="请输入职位名称" value="前端开发实习生">
                        </div>
                        <div class="form-group">
                            <label for="exp-description" class="form-label">工作描述</label>
                            <textarea id="exp-description" class="form-textarea" placeholder="请输入工作描述">1. 参与公司核心产品的前端开发工作，负责页面重构和性能优化
2. 使用 React 开发新功能模块，提升用户体验
3. 编写技术文档，参与代码审查</textarea>
                        </div>
                    </div>
                    
                    <button class="add-item-btn">
                        <i class="bi bi-plus"></i>
                        添加实习经历
                    </button>
                </section>
            </div>

            <!-- 项目与技能 -->
            <div id="projects-skills-tab" class="edit-tab-content">
                <!-- 项目经历 -->
                <section class="edit-section">
                    <h2 class="section-title">
                        <i class="bi bi-code-square"></i>
                        项目经历
                    </h2>
                    
                    <div class="entry-group">
                        <button class="delete-entry">
                            <i class="bi bi-x"></i>
                        </button>
                        <div class="form-group">
                            <label for="project-name" class="form-label">项目名称</label>
                            <input type="text" id="project-name" class="form-input" placeholder="请输入项目名称" value="校园二手交易平台">
                        </div>
                        <div class="form-group">
                            <label for="project-date" class="form-label">项目时间</label>
                            <div class="date-range">
                                <input type="text" class="form-input" placeholder="开始时间" value="2023.03">
                                <span class="date-separator">-</span>
                                <input type="text" class="form-input" placeholder="结束时间" value="2023.05">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="project-description" class="form-label">项目描述</label>
                            <textarea id="project-description" class="form-textarea" placeholder="请输入项目描述">1. 使用 Vue.js 开发前端界面，实现商品展示、搜索、交易等功能
2. 设计并实现用户认证、商品管理等后端 API
3. 使用 MySQL 设计数据库，优化查询性能</textarea>
                        </div>
                    </div>
                    
                    <button class="add-item-btn">
                        <i class="bi bi-plus"></i>
                        添加项目经历
                    </button>
                </section>

                <!-- 技能特长 -->
                <section class="edit-section">
                    <h2 class="section-title">
                        <i class="bi bi-star"></i>
                        技能特长
                    </h2>
                    
                    <div class="skill-tag-input">
                        <div class="skill-tag">
                            JavaScript
                            <button class="remove-tag">
                                <i class="bi bi-x"></i>
                            </button>
                        </div>
                        <div class="skill-tag">
                            Vue.js
                            <button class="remove-tag">
                                <i class="bi bi-x"></i>
                            </button>
                        </div>
                        <div class="skill-tag">
                            React
                            <button class="remove-tag">
                                <i class="bi bi-x"></i>
                            </button>
                        </div>
                        <div class="skill-tag">
                            Node.js
                            <button class="remove-tag">
                                <i class="bi bi-x"></i>
                            </button>
                        </div>
                        <div class="skill-tag">
                            MySQL
                            <button class="remove-tag">
                                <i class="bi bi-x"></i>
                            </button>
                        </div>
                        <div class="skill-tag">
                            Git
                            <button class="remove-tag">
                                <i class="bi bi-x"></i>
                            </button>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <div class="skill-input-wrapper">
                            <input type="text" class="form-input skill-input" placeholder="添加技能标签">
                            <button class="add-skill-btn">
                                <i class="bi bi-plus"></i>
                            </button>
                        </div>
                    </div>
                </section>
            </div>
        </div>

        <!-- 底部操作栏 -->
        <div class="bottom-actions">
            <button class="action-btn secondary-btn" onclick="history.back()">
                取消
            </button>
            <button class="action-btn primary-btn" id="save-btn">
                保存
            </button>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 选项卡切换
            const tabs = document.querySelectorAll('.tab-item');
            tabs.forEach(tab => {
                tab.addEventListener('click', function() {
                    const tabId = this.getAttribute('data-tab');
                    
                    // 更新选项卡样式
                    tabs.forEach(item => item.classList.remove('active'));
                    this.classList.add('active');
                    
                    // 显示对应内容
                    document.querySelectorAll('.edit-tab-content').forEach(content => {
                        content.classList.remove('active');
                    });
                    document.getElementById(tabId + '-tab').classList.add('active');
                });
            });

            // 头像上传
            const uploadBtn = document.querySelector('.upload-btn');
            const fileInput = document.getElementById('avatar-upload');
            const previewImg = document.getElementById('avatar-preview-img');
            
            uploadBtn.addEventListener('click', function() {
                fileInput.click();
            });
            
            fileInput.addEventListener('change', function() {
                if (this.files && this.files[0]) {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        previewImg.src = e.target.result;
                    };
                    reader.readAsDataURL(this.files[0]);
                }
            });

            // 添加技能标签
            const skillInput = document.querySelector('.skill-input');
            const addSkillBtn = document.querySelector('.add-skill-btn');
            const skillTagContainer = document.querySelector('.skill-tag-input');
            
            function addSkillTag(skillName) {
                if (skillName.trim() === '') return;
                
                const skillTag = document.createElement('div');
                skillTag.className = 'skill-tag';
                skillTag.innerHTML = `
                    ${skillName}
                    <button class="remove-tag">
                        <i class="bi bi-x"></i>
                    </button>
                `;
                
                skillTagContainer.insertBefore(skillTag, skillInput.parentElement.parentElement);
                
                // 添加删除标签事件
                skillTag.querySelector('.remove-tag').addEventListener('click', function() {
                    skillTag.remove();
                });
                
                skillInput.value = '';
            }
            
            addSkillBtn.addEventListener('click', function() {
                addSkillTag(skillInput.value);
            });
            
            skillInput.addEventListener('keypress', function(e) {
                if (e.key === 'Enter') {
                    e.preventDefault();
                    addSkillTag(this.value);
                }
            });

            // 删除标签事件
            document.querySelectorAll('.remove-tag').forEach(btn => {
                btn.addEventListener('click', function() {
                    this.closest('.skill-tag').remove();
                });
            });

            // 添加条目按钮点击事件
            document.querySelectorAll('.add-item-btn').forEach(btn => {
                btn.addEventListener('click', function() {
                    const section = this.closest('.edit-section');
                    const template = section.querySelector('.entry-group').cloneNode(true);
                    
                    // 清空克隆元素的输入值
                    template.querySelectorAll('input, textarea').forEach(input => {
                        input.value = '';
                    });
                    
                    // 插入到按钮前面
                    section.insertBefore(template, this);
                    
                    // 添加删除事件
                    template.querySelector('.delete-entry').addEventListener('click', function() {
                        template.remove();
                    });
                });
            });

            // 删除条目点击事件
            document.querySelectorAll('.delete-entry').forEach(btn => {
                btn.addEventListener('click', function() {
                    // 检查是否是最后一个条目
                    const section = this.closest('.edit-section');
                    const entries = section.querySelectorAll('.entry-group');
                    
                    if (entries.length > 1) {
                        this.closest('.entry-group').remove();
                    } else {
                        alert('至少保留一项记录');
                    }
                });
            });

            // 保存按钮点击事件
            document.getElementById('save-btn').addEventListener('click', function() {
                // 这里添加保存逻辑，可以收集所有表单数据
                alert('简历保存成功！');
                window.location.href = 'resume-detail.html';
            });

            // 获取URL参数，跳转到对应的选项卡
            const urlParams = new URLSearchParams(window.location.search);
            const section = urlParams.get('section');
            
            if (section) {
                // 根据section参数跳转到对应选项卡
                let tabId;
                
                if (section.includes('基本信息')) {
                    tabId = 'basic-info';
                } else if (section.includes('教育经历')) {
                    tabId = 'education';
                } else if (section.includes('实习经历')) {
                    tabId = 'experience';
                } else if (section.includes('项目经历') || section.includes('技能特长')) {
                    tabId = 'projects-skills';
                }
                
                if (tabId) {
                    document.querySelector(`[data-tab="${tabId}"]`).click();
                }
            }
        });
    </script>
</body>
</html> 